<template>
  <div class="mainPage">
    <div></div>
    <!-- <miheader></miheader> -->
    <miheader></miheader>
    <div class="mainContain">
      <topbar></topbar>
      <swiper-box :navMsg="miProduction"></swiper-box>
      <adx-box></adx-box>
      <banner></banner>
    </div>
    <product-box></product-box>
    <footermi></footermi>
  </div>
</template>

<script>
import swiperBox from '@/components/swiperBox.vue'
import adxBox from '@/components/adx_box.vue'
import banner from '@/components/mbanner.vue'
import productBox from '@/components/product-box.vue'
import footermi from '@/components/footermi.vue'

export default {
  name: 'mainPage',
  components: {
    'swiper-box': swiperBox,
    'adx-box': adxBox,
    banner,
    'product-box': productBox,
    footermi,
  },
  data() {
    return {
      miProduction: [
        { name: '小米CC9', img: 'img/item-box-1.png', link: '' },
        { name: '小米8青春版', img: 'img/item-box-2.png', link: '' },
        { name: 'Redmi K20 Pro', img: 'img/item-box-3.jpg', link: '' },
        { name: '移动4G专区', img: 'img/item-box-4.jpg', link: '' },
        { name: '小米CC9', img: 'img/item-box-1.png', link: '' },
        { name: '小米CC9', img: 'img/item-box-1.png', link: '' },
        { name: '小米CC9', img: 'img/item-box-1.png', link: '' },
        { name: '小米CC9', img: 'img/item-box-1.png', link: '' },
        { name: '小米CC9', img: 'img/item-box-1.png', link: '' },
      ],
      phoneList: [],
    }
  },
  mounted() {
    // console.log(this.$store.state.UserMsg)
    this.init()
  },
  methods: {
    async init() {
      let  res  = await this.axios.get('/products', {
        params: {
          categoryId: 100012,
          pageSize: 14,
        },
      })
      // console.log(res)
      res.list = res.list.slice(6, 14)
      this.phoneList = [res.list.slice(0, 4), res.list.slice(4, 8)]
      // console.log(this.phoneList)
    },
    link(a) {
      this.$router.push(a)
    },
  },
}
</script>

<style lang="scss">
.mainPage {
  .mainContain {
    width: 1226px;
    margin: auto;
  }
}
</style>